<template>
	<div class="page">
		<div class="header">
			<img src="../public/标题.png" alt="MDONG梦动" />
		</div>
		<div class="content">
			<div class="left">
				<img src="../左背景.png" alt="背景图" />
			</div>
			<div class="right">
				<div class="avatar"></div>
				<el-input placeholder="用户名"></el-input>
				<el-input type="password" placeholder="密码"></el-input>
				<el-checkbox>保持会话</el-checkbox>
				<el-button type="primary" class="login-button">登录</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
	// 这里可以添加 JavaScript 逻辑
</script>

<style>
	body {
		margin: 0;
		font-family: Arial, sans-serif;
		background-color: #f5f5f5;
	}

	.page {
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: white;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 16px;
		overflow: hidden;
	}

	.header {
		text-align: center;
		margin-bottom: 24px;
	}

	.header img {
		width: 100%;
	}

	.header h1 {
		font-size: 24px;
		color: #333;
		margin: 8px 0 0;
	}

	.content {
		display: flex;
		width: 100%;
		max-width: 800px;
	}

	.left {
		flex: 1;
		background-color: #ffaaff;
		border-radius: 16px 0 0 16px;
		overflow: hidden;
	}

	.left img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.right {
		flex: 1;
		padding: 40px;
		background-color: white;
		text-align: center;
		border-radius: 0 16px 16px 0;
	}

	.avatar {
		width: 80px;
		height: 80px;
		background-color: #eee;
		border-radius: 50%;
		margin: 0 auto 24px;
	}

	.el-input,
	.el-checkbox,
	.login-button {
		width: 100%;
		margin-bottom: 16px;
	}

	.login-button {
		background-color: #ff6600;
		color: white;
		border: none;
		padding: 12px;
		border-radius: 5px;
		cursor: pointer;
	}

	.login-button:hover {
		background-color: #e65c00;
	}
</style>